<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Register Step1 · LEARN</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body style="background-color: #f8f6e9; font-family: Times New Roman">
        <div class="container">
            <nav class="navbar navbar-light">
                <a class="navbar-brand" href="#">
                    <img src="/static/img/BigLogo.png" height="80" class="d-inline-block align-top">
                </a>
            </nav>
            <h1 class="text-center mb-5">Step 1: Check the task you are working on!</h1>
            <h3 class="text-center mb-3">Check Working Field</h4>
            <div class="row mb-5">
                <div class="form-check col text-center">
                    <input class="form-check-input" type="radio" name="identity" value="worker">
                    <label class="form-check-label">
                        I work in AI.
                    </label>
                </div>
                <div class="form-check col text-center">
                    <input class="form-check-input" type="radio" name="identity" value="novice" checked>
                    <label class="form-check-label">
                        I am a novice.
                    </label>
                </div>
            </div>
            <div class="row mb-5 d-none" id="working">
                <div class="col text-center">
                    <h4 class="mb-3">Task navigation</h4>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text">Check AI Field</div>
                        </div>
                        <select class="form-control" id="field1">
                        </select>
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text">Check AI Task</div>
                        </div>
                        <select class="form-control" id="task1">
                        </select>
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text">Check AI SubTask</div>
                        </div>
                        <select class="form-control" id="subtask1">
                        </select>
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text">Check AI Benchmark</div>
                        </div>
                        <select class="form-control" id="benchmark1">
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary" id="choose1">Choose</button>
                </div>
                <div class="col text-center">
                    <h4 class="mb-3">Chosen</h4>
                    <div class="form-group">
                        <select multiple class="form-control" id="chosen1" size="10">
                        </select>
                    </div>
                    <button type="button" class="btn btn-danger" id="remove1">Remove</button>
                </div>
            </div>
            <h3 class="text-center mb-3">Check Interested Field</h4>
            <div class="form-check text-center mb-3">
                <input class="form-check-input" id="same" type="checkbox" disabled>
                <label class="form-check-label">
                    Set my current working field as interesting field.
                </label>
            </div>
            <div class="row mb-5" id="interested">
                <div class="col text-center">
                    <h4 class="mb-3">Task navigation</h4>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text">Check AI Field</div>
                        </div>
                        <select class="form-control" id="field2">
                        </select>
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text">Check AI Task</div>
                        </div>
                        <select class="form-control" id="task2">
                        </select>
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text">Check AI SubTask</div>
                        </div>
                        <select class="form-control" id="subtask2">
                        </select>
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <div class="input-group-text">Check AI Benchmark</div>
                        </div>
                        <select class="form-control" id="benchmark2">
                        </select>
                    </div>
                    <button type="button" class="btn btn-primary" id="choose2">Choose</button>
                </div>
                <div class="col text-center">
                    <h4 class="mb-3">Chosen</h4>
                    <div class="form-group">
                        <select multiple class="form-control" id="chosen2" size="10">
                        </select>
                    </div>
                    <button type="button" class="btn btn-danger" id="remove2">Remove</button>
                </div>
            </div>
            <div class="text-right">
                <button class="btn btn-primary btn-lg" id="next">Next step</a>
            </div>
            <footer class="my-3 pt-3 text-muted text-center text-small">
                <p class="mb-1">&copy;Learners' Engineering and Research Network</p>
            </footer>
        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
        <script src="/static/js/register1.js"></script>
    </body>
</html>
